<template>
  <div class="user-avatar-dropdown">
    <Dropdown @on-click="handleClick">
      <!-- <Badge :dot="!!messageUnreadCount"> -->
      <Avatar class="avatar-border" src="avator.png" />管理员
      <!-- </Badge> -->
      <Icon :size="18" type="md-arrow-dropdown"></Icon>
      <DropdownMenu slot="list">
        <!-- <DropdownItem name="message">
          消息中心<Badge style="margin-left: 10px" :count="messageUnreadCount"></Badge>
        </DropdownItem>-->
        <DropdownItem name="changepw">修改密码</DropdownItem>
        <DropdownItem name="logout" @click="logout">退出登录</DropdownItem>
      </DropdownMenu>
    </Dropdown>

    <Modal
      v-model="modal_visable"
      :title="modal_title"
      :loading="false"
      @on-visible-change="reset_modal_form()"
      :mask-closable="false"
    >
      <!-- 弹层内容 -->
      <Form ref="modal_form" :model="modal_form" :label-width="80">
        <FormItem prop="value" label="用户名">
          <Input type="text" disabled v-model="modal_form.value" placeholder="value" />
        </FormItem>
        <FormItem prop="value" label="密码">
          <Input type="text" v-model="modal_form.value" placeholder="value" />
        </FormItem>
        <FormItem prop="value" label="确认密码">
          <Input type="text" v-model="modal_form.value" placeholder="value" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="modal_cancel">取消</Button>
        <Button type="primary" @click="modal_ok">确定</Button>
      </div>
      <!-- 弹层内容 end -->
    </Modal>
  </div>
</template>

<script>
import "./user.less";
export default {
  name: "User",
  data() {
    return {
      modal_visable: false,
      modal_title: "修改密码",
      modal_form: {
        username: "",
        password: "",
        repassword: ""
      }
    };
  },
  // props: {
  //   userAvatar: {
  //     type: String,
  //     default: ''
  //   },
  //   messageUnreadCount: {
  //     type: Number,
  //     default: 0
  //   }
  // },
  methods: {
    modal_cancel() {
      this.modal_visable = false;
    },
    modal_ok() {
      this.modal_visable = false;
    },
    reset_modal_form() {},
    logout() {
      if (confirm("是否退出登录")) {
        this.$router.push({
          name: "login"
        });
      }

      return;
      this.ajax("/api/User/Login/", "get", this.formData, false).then(res => {
        let response = res.data;
        if (response.code == 200) {
        }
        this.$Message.info(response.msg);
      });
    },
    open_changepw() {
      this.modal_visable = true;
    },
    message() {
      // this.$router.push({
      //   name: 'message_page'
      // })
    },
    handleClick(name) {
      switch (name) {
        case "logout":
          this.logout();
          break;
        case "changepw":
          this.open_changepw();
          break;
      }
    }
  }
};
</script>
<style lang="less" scoped>
.avatar-border {
  border: 1px solid #ddd;
}
</style>

